<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        background: #f5f5f5;
    }

    .left div{
        height: 45px;
        background: #ffffff;
        margin-bottom: 1px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .left {
        width: 11%;
        height: 100vh;
        float: left;
    }
    .right{
        overflow: hidden;
        height: 100vh;
    }
</style>
<script>
    $(document).ready(function () {
        $("#a1").click(function () {
            $(this).css("background", "#64ebac");
            $("#a2").css("background", "#ffffff");
            $("#a3").css("background", "#ffffff");
            $("#a4").css("background", "#ffffff");
            $(".iframe_1").css("display", "block");
            $(".iframe_2").css("display", "none");
            $(".iframe_3").css("display", "none");
            $(".iframe_4").css("display", "none");
        });
        $("#a2").click(function () {
            $(this).css("background", "#64ebac");
            $("#a1").css("background", "#ffffff");
            $("#a3").css("background", "#ffffff");
            $("#a4").css("background", "#ffffff");
            $(".iframe_1").css("display", "none");
            $(".iframe_2").css("display", "block");
            $(".iframe_3").css("display", "none");
            $(".iframe_4").css("display", "none");
        });
        $("#a2").click(function () {
            $(this).css("background", "#64ebac");
            $("#a1").css("background", "#ffffff");
        });
        $("#a3").click(function () {
            $(this).css("background", "#64ebac");
            $("#a1").css("background", "#ffffff");
            $("#a2").css("background", "#ffffff");
            $("#a4").css("background", "#ffffff");
            $(".iframe_1").css("display", "none");
            $(".iframe_2").css("display", "none");
            $(".iframe_3").css("display", "block");
            $(".iframe_4").css("display", "none");
        });
        $("#a4").click(function () {
            $(this).css("background", "#64ebac");
            $("#a1").css("background", "#ffffff");
            $("#a2").css("background", "#ffffff");
            $("#a3").css("background", "#ffffff");
            $(".iframe_1").css("display", "none");
            $(".iframe_2").css("display", "none");
            $(".iframe_3").css("display", "none");
            $(".iframe_4").css("display", "block");
        });
    })

</script>

<body>
    <div class="left">
        <div style="background: #64ebac;" id="a1">首页</div>
        <div id="a2">项目</div>
        <div id="a3">管理</div>
        <div id="a4">设置</div>
    </div>
    <div class="right">
       <iframe src="yu/frame_a.htm" frameborder="0" width="100%" style="height: 100vw; overflow: hidden;" class="iframe_1"></iframe>
       <iframe src="yu/frame_b.htm" frameborder="0" width="100%" style="height: 100vw; overflow: hidden;" class="iframe_2"></iframe>
       <iframe src="yu/frame_c.htm" frameborder="0" width="100%" style="height: 100vw; overflow: hidden;" class="iframe_3"></iframe>
       <iframe src="yu/frame_d.htm" frameborder="0" width="100%" style="height: 100vw; overflow: hidden;" class="iframe_4"></iframe>
    </div>
</body>

</html>